<template>
  <div
    class="board-column1"
    :class="{ used: number == 4 || number == 5 || number == 7 }"
  >
    <div class="board-column-header">{{ headerText }}</div>
    <draggable
      :disabled="disabled"
      :list="list"
      v-bind="$attrs"
      class="board-column-content"
      :move="onMove"
    >
      <div
        v-for="(item, index) in list"
        :key="index"
        class="board-item"
        :style="{ 'background-color': item.bgcolor || '' }"
      >
        <el-image :src="item.icon">
          <div slot="error" class="image-slot">
            <i class="el-icon-picture-outline" />
          </div>
        </el-image>
        <section class="item-txt">
          <section>{{ item.name }}</section>
          <section v-if="item.text">（{{ item.text }}）</section>
        </section>
        <!-- <el-switch v-model="item.show" active-text="显示" inactive-text="不显示" /> -->
        <!-- <el-switch v-model="item.login" active-text="需要登录" inactive-text="不需要登录" /> -->
        <el-button
          type="text"
          icon="el-icon-edit"
          @click="handleEdit(item, index)"
        />
        <i class="el-icon-delete" @click="handleDelete(index)" />
      </div>
    </draggable>
    <section class="inner-add" @click="handleIconAdd()">添加</section>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
import ghhn from './../images/icon-ghhn.png'
import cxxc from './../images/icon-cxxc.png'
import zgfc from './../images/icon-zgfc.png'
import ghry from './../images/icon-ghry.png'
import hyzs from './../images/icon-hyzs.png'
import zgtp from './../images/icon-zgtp.png'
import fczj from './../images/icon-fczj.png'
import flfw from './../images/icon-flfw.png'
import xlyz from './../images/icon-xlyz.png'
import hybf from './../images/icon-hybf.png'
import zdh from './../images/icon-zdh.png'
import wjtc from './../images/icon-wjtc.png'

import servicewdfl from './../images/service/wdfl.png'
import servicehdzx from './../images/service/hdzx.png'
import servicehfsj from './../images/service/hfsj.png'
import serviceghzj from './../images/service/ghzj.png'
import serviceghxw from './../images/service/ghxw.png'
import servicegg from './../images/service/gg.png'
import servicefwrx from './../images/service/fwrx.png'
import servicegaxd from './../images/service/gaxd.png'
import servicezxx from './../images/service/zxx.png'
import serviceghjz from './../images/service/ghjz.png'
import servicexfng from './../images/service/xfng.png'
import servicebmfw from './../images/service/bmfw.png'
import servicejnzq from './../images/service/jnzq.png'
import servicecglb from './../images/service/cglb.png'
import servicezxxx from './../images/service/zxxx.png'
import servicezxks from './../images/service/zxks.png'
import servicezxdt from './../images/service/zxdt.png'
import servicephb from './../images/service/phb.png'
import servicezjhd from './../images/service/zjhd.png'
import servicetphd from './../images/service/tphd.png'
import servicedcwj from './../images/service/dcwj.png'
import serviceghhn from './../images/service/ghhn.png'
import servicezcwj from './../images/service/zcwj.png'
import servicecylj from './../images/service/cylj.png'
import servicetxl from './../images/service/txl.png'
import servicebgzl from './../images/service/bgzl.png'
import servicezzjg from './../images/service/zzjg.png'
import servicehygl from './../images/service/hygl.png'
import serviceghry from './../images/service/ghry.png'
import servicedsj from './../images/service/dsj.png'
import servicecsyy from './../images/service/csyy.png'
import servicezgyy from './../images/service/zgyy.png'
import servicezgfc from './../images/service/zgfc.png'
import servicecxgzs from './../images/service/cxgzs.png'
import servicezgcx from './../images/service/zgcx.png'
import servicezdh from './../images/service/zdh.png'
import servicehyzs from './../images/service/hyzs.png'
import servicejfrw from './../images/service/jfrw.png'
import serviceflsc from './../images/service/flsc.png'
import servicexlyz from './../images/service/xlyz.png'
import servicemmxw from './../images/service/mmxw.png'
import servicebfjz from './../images/service/bfjz.png'
import servicehyww from './../images/service/hyww.png'
import serviceflzx from './../images/service/flzx.png'
import serviceflfw from './../images/service/flfw.png'
import servicezgsw from './../images/service/zgsw.png'
import newgdh from './../images/news/newgdh.png'
import newzgfc from './../images/news/newzgfc.png'
import newghxw from './../images/news/newghxw.png'
import newgg from './../images/news/newgg.png'
import newxlyz from './../images/news/newxlyz.png'

import newhwzs from './../images/news/newhwzs.png'
import newbfjz from './../images/news/newbfjz.png'
import newflfw from './../images/news/newflfw.png'
import newzgjk from './../images/news/newzgjk.png'
import newzgsw from './../images/news/newzgsw.png'
import newzzjg from './../images/news/newzzjg.png'
import newghry from './../images/news/newghry.png'
import newdsj from './../images/news/newdsj.png'
import newjnzq from './../images/news/newjnzq.png'
import newcglb from './../images/news/newcglb.png'
import newzxxx from './../images/news/newzxxx.png'
import newzxks from './../images/news/newzxks.png'
import newzxdt from './../images/news/newzxdt.png'
import newphb from './../images/news/newphb.png'
import newbmhd from './../images/news/newbmhd.png'
import newtphd from './../images/news/newtphd.png'
import newdcwj from './../images/news/newdcwj.png'
import newzgjy from './../images/news/newzgjy.png'
import newzjhd from './../images/news/newzjhd.png'
import newxfng from './../images/news/newxfng.png'
import newmmxw from './../images/news/newmmxw.png'
import newaxyz from './../images/news/newaxyz.png'
import newwdfl from './../images/news/newwdfl.png'
import newjfrw from './../images/news/newjfrw.png'
import newsc from './../images/news/newsc.png'
import newfwrx from './../images/news/newfwrx.png'
import newcylj from './../images/news/newcylj.png'
import newcgyy from './../images/news/newcgyy.png'
// import newylhz from './../images/news/newylhz.png'
import newymxd from './../images/news/newymxd.png'
import newzjbl from './../images/news/newzjbl.png'
import newzyfw from './../images/news/newzyfw.png'
import activity from './../images/footer/activity-g.png'
import center from './../images/footer/center-g.png'
import inx from './../images/footer/index-g.png'
import servicePng from './../images/footer/service-g.png'
import shopPng from './../images/footer/shop-g.png'
import skillPng from './../images/footer/skill-g.png'
import hdD from './../images/footer/hd-d.png'
import hd1D from './../images/footer/hd1-d.png'
import syD from './../images/footer/sy-d.png'
import sy1D from './../images/footer/sy1-d.png'
import xxD from './../images/footer/xxD.png'
import xx1D from './../images/footer/xx1D.png'
import myD from './../images/footer/myD.png'
import fwD from './../images/footer/fw.png'
import ccD from './../images/footer/ccD.png'
import jnqgxx from './../images/footer/jnqgxx.png'
import jnqgcg from './../images/footer/jnqgcg.png'
import ahIndex from './../images/footer/ahIndex.png'
import ahCourse from './../images/footer/ahCourse.png'
import ahMy from './../images/footer/ahMy.png'
import ahactivity from './../images/footer/ahactivity.png'

export default {
  name: 'DragKanbanDemo',
  components: {
    draggable
  },
  props: {
    headerText: {
      type: String,
      default: 'Header'
    },
    options: {
      type: Object,
      default() {
        return {}
      }
    },
    group: {
      type: String,
      default: ''
    },
    number: {
      type: Number,
      default: 1
    },
    list: {
      type: Array,
      default() {
        return []
      },
      validator: value => {
        return value.length <= 10
      }
    }
  },
  data() {
    return {
      disabled: false
    }
  },
  methods: {
    getIcon(icon) {
      let s = ''
      switch (icon) {
        case 'ghhn':
          s = ghhn
          break
        case 'cxxc':
          s = cxxc
          break
        case 'zgfc':
          s = zgfc
          break
        case 'ghry':
          s = ghry
          break
        case 'hyzs':
          s = hyzs
          break
        case 'zgtp':
          s = zgtp
          break
        case 'fczj':
          s = fczj
          break
        case 'flfw':
          s = flfw
          break
        case 'xlyz':
          s = xlyz
          break
        case 'hybf':
          s = hybf
          break
        case 'zdh':
          s = zdh
          break
        case 'wjtc':
          s = wjtc
          break
        case 'servicewdfl':
          s = servicewdfl
          break
        case 'servicehdzx':
          s = servicehdzx
          break
        case 'servicehfsj':
          s = servicehfsj
          break
        case 'serviceghzj':
          s = serviceghzj
          break
        case 'serviceghxw':
          s = serviceghxw
          break
        case 'servicegg':
          s = servicegg
          break
        case 'servicefwrx':
          s = servicefwrx
          break
        case 'servicegaxd':
          s = servicegaxd
          break
        case 'servicezxx':
          s = servicezxx
          break
        case 'serviceghjz':
          s = serviceghjz
          break
        case 'servicexfng':
          s = servicexfng
          break
        case 'servicebmfw':
          s = servicebmfw
          break
        case 'servicejnzq':
          s = servicejnzq
          break
        case 'servicecglb':
          s = servicecglb
          break
        case 'servicezxxx':
          s = servicezxxx
          break
        case 'servicezxks':
          s = servicezxks
          break
        case 'servicezxdt':
          s = servicezxdt
          break
        case 'servicephb':
          s = servicephb
          break
        case 'servicezjhd':
          s = servicezjhd
          break
        case 'servicetphd':
          s = servicetphd
          break
        case 'servicedcwj':
          s = servicedcwj
          break
        case 'serviceghhn':
          s = serviceghhn
          break
        case 'servicezcwj':
          s = servicezcwj
          break
        case 'servicecylj':
          s = servicecylj
          break
        case 'servicetxl':
          s = servicetxl
          break
        case 'servicebgzl':
          s = servicebgzl
          break
        case 'servicezzjg':
          s = servicezzjg
          break
        case 'servicehygl':
          s = servicehygl
          break
        case 'serviceghry':
          s = serviceghry
          break
        case 'servicedsj':
          s = servicedsj
          break
        case 'servicecsyy':
          s = servicecsyy
          break
        case 'servicezgyy':
          s = servicezgyy
          break
        case 'servicezgfc':
          s = servicezgfc
          break
        case 'servicecxgzs':
          s = servicecxgzs
          break
        case 'servicezgcx':
          s = servicezgcx
          break
        case 'servicezdh':
          s = servicezdh
          break
        case 'servicehyzs':
          s = servicehyzs
          break
        case 'servicejfrw':
          s = servicejfrw
          break
        case 'serviceflsc':
          s = serviceflsc
          break
        case 'servicexlyz':
          s = servicexlyz
          break
        case 'servicemmxw':
          s = servicemmxw
          break
        case 'servicebfjz':
          s = servicebfjz
          break
        case 'servicehyww':
          s = servicehyww
          break
        case 'serviceflzx':
          s = serviceflzx
          break
        case 'serviceflfw':
          s = serviceflfw
          break
        case 'servicezgsw':
          s = servicezgsw
          break
        case 'newgdh':
          s = newgdh
          break
        case 'newzgfc':
          s = newzgfc
          break
        case 'newghxw':
          s = newghxw
          break
        case 'newgg':
          s = newgg
          break
        case 'newxlyz':
          s = newxlyz
          break

        case 'newhwzs':
          s = newhwzs
          break
        case 'newbfjz':
          s = newbfjz
          break
        case 'newflfw':
          s = newflfw
          break
        case 'newzgjk':
          s = newzgjk
          break
        case 'newzgsw':
          s = newzgsw
          break
        case 'newzzjg':
          s = newzzjg
          break
        case 'newghry':
          s = newghry
          break
        case 'newdsj':
          s = newdsj
          break
        case 'newjnzq':
          s = newjnzq
          break
        case 'newcglb':
          s = newcglb
          break
        case 'newzxxx':
          s = newzxxx
          break
        case 'newzxks':
          s = newzxks
          break
        case 'newzxdt':
          s = newzxdt
          break
        case 'newphb':
          s = newphb
          break
        case 'newbmhd':
          s = newbmhd
          break
        case 'newtphd':
          s = newtphd
          break
        case 'newdcwj':
          s = newdcwj
          break
        case 'newzgjy':
          s = newzgjy
          break
        case 'newzjhd':
          s = newzjhd
          break
        case 'newxfng':
          s = newxfng
          break
        case 'newmmxw':
          s = newmmxw
          break
        case 'newaxyz':
          s = newaxyz
          break
        case 'newwdfl':
          s = newwdfl
          break
        case 'newjfrw':
          s = newjfrw
          break
        case 'newsc':
          s = newsc
          break
        case 'newfwrx':
          s = newfwrx
          break
        case 'newcylj':
          s = newcylj
          break
        case 'newcgyy':
          s = newcgyy
          break
        // case 'newylhz':
        // 	s = newylhz
        // 	break
        case 'newymxd':
          s = newymxd
          break
        case 'newzjbl':
          s = newzjbl
          break
        case 'newzyfw':
          s = newzyfw
          break
        default:
          break
      }
      return s
    },
    getsDefaultIcon(icon) {
      let s = ''
      switch (icon) {
        case 'activity':
          s = activity
          break
        case 'center':
          s = center
          break
        case 'inx':
          s = inx
          break
        case 'servicePng':
          s = servicePng
          break
        case 'shopPng':
          s = shopPng
          break
        case 'skillPng':
          s = skillPng
          break
        case 'hdD':
          s = hdD
          break
        case 'hd1D':
          s = hd1D
          break
        case 'syD':
          s = syD
          break
        case 'sy1D':
          s = sy1D
          break
        case 'xxD':
          s = xxD
          break
        case 'xx1D':
          s = xx1D
          break
        case 'myD':
          s = myD
          break
        case 'fwD':
          s = fwD
          break
        case 'ccD':
          s = ccD
          break
        case 'jnqgxx':
          s = jnqgxx
          break
        case 'jnqgcg':
          s = jnqgcg
          break
        case 'ahIndex':
          s = ahIndex
          break
        case 'ahCourse':
          s = ahCourse
          break
        case 'ahMy':
          s = ahMy
          break
        case 'ahactivity':
          s = ahactivity
          break
        default:
          break
      }
      return s
    },
    setData(dataTransfer) {
      dataTransfer.setData('Text', '')
    },
    onMove(e, originalEvent) {
      const list = e.relatedContext.list
      if (list.length >= 10) {
        return false
      } else {
        return true
      }
    },
    handleEdit(row, index) {
      this.$emit('edit', {
        n: this.number,
        r: row,
        t: this.group,
        i: index
      })
    },
    handleIconAdd() {
      if (this.list.length >= 5) {
        return this.$message({
          message: '最多只能添加5个底部菜单',
          type: 'warning'
        })
      }
      this.$emit('handleAdd')
    },
    handleDelete(index) {
      this.$emit('handleDelete', index)
    }
  }
}
</script>
<style lang="scss">
.board-column1 {
  min-width: 350px;
  min-height: 100px;
  height: auto;
  overflow: hidden;
  background: #f0f0f0;
  border-radius: 3px;

  &.used {
    min-width: 500px;
  }

  .board-column-header {
    height: 50px;
    line-height: 50px;
    overflow: hidden;
    padding: 0 20px;
    text-align: center;
    background: #333;
    color: #fff;
    border-radius: 3px 3px 0 0;
  }

  .board-column-content {
    height: auto;
    overflow: hidden;
    border: 10px solid transparent;
    min-height: 60px;
    display: flex;
    // justify-content: flex-start;
    // flex-direction: column;
    justify-content: space-around;
    align-items: center;

    .board-item {
      display: flex;
      flex: 1;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      // width: 100%;
      // height: 64px;
      margin: 5px 0;
      background-color: #fff;
      text-align: left;
      // line-height: 54px;
      padding: 5px 10px;
      box-sizing: border-box;
      box-shadow: 0px 1px 3px 0 rgba(0, 0, 0, 0.2);
      display: flex;
      align-items: center;
      justify-content: space-around;

      .el-image {
        width: 40px;
        height: 40px;
        .image-slot {
          background: #f5f7fa;
        }
      }

      .item-txt {
        // display: flex;
        // align-items: center;
        // justify-content: center;
        // padding-left: 10px;
        text-align: center;
        width: 100%;
      }
    }
  }
  .inner-add {
    cursor: pointer;
    line-height: 40px;
    text-align: center;
    border: 1px dotted #e5e5e5;

    &:hover {
      @include font-color($mainColor);
      @include border-color(1px, dotted, $mainColor);
    }
  }
}
</style>
